<template>
  <div class='dashboard'>
    <row v-if="isEnableCustomized">
      <app-build @handleClick="handleClick"></app-build>
    </row>
    <row v-if="!isHasCustomized">
      <i-col :md="{ span: 24, offset: 0 }">
        <card class="portlet-card custom-card" :bordered="false" dis-hover :padding="10">
          <span>
                      <view_dashboard_UserInfoCard 
              :viewState="viewState"  
              :viewparams="viewparams" 
              :context="context" 
              :height="0"
              :width="0"
              name="dashboard_UserInfoCard"  
              ref='dashboard_UserInfoCard' 
              @closeview="closeView($event)">
          </view_dashboard_UserInfoCard>
          </span>
        </card>
      </i-col>
      <i-col :md="{ span: 24, offset: 0 }">
        <card class="portlet-card custom-card" :bordered="false" dis-hover :padding="10">
          <span>
                      <view_dashboard_TaskNav 
              :viewState="viewState"  
              :viewparams="viewparams" 
              :context="context" 
              :height="0"
              :width="0"
              name="dashboard_TaskNav"  
              ref='dashboard_TaskNav' 
              @closeview="closeView($event)">
          </view_dashboard_TaskNav>
          </span>
        </card>
      </i-col>
    </row>
    <row v-if="isHasCustomized" style="width: 100%;min-height: calc(100% - 40px);">
      <div class="portlet-container" style="position: relative;width:100%;">
        <template v-for="(item, index) of modelDta">
        <div :key="index" :style="{zIndex: 10, position: 'absolute', height: item.h*layoutRowH + 'px', width: `calc(100% / ${layoutColNum} * ${item.w})`,top: item.y*layoutRowH + 'px', left: `calc(100% / ${layoutColNum} * ${item.x})`}">
          <component :key="$util.createUUID()" :is="item.componentName" :name="item.portletCodeName" :context="JSON.parse(JSON.stringify(context))" :viewDefaultUsage="false" :isAdaptiveSize="true" :viewState="viewState"></component>
        </div>
        </template>
    </div>
    </row>
  </div>
</template>
<script lang='tsx'>
import { Component } from 'vue-property-decorator';
import MytaskBase from './mytask-dashboard-base.vue';
import view_dashboard_UserInfoCard from '@widgets/task/userinfo-card-portlet/userinfo-card-portlet.vue';
import view_dashboard_TaskNav from '@widgets/task/task-tabexpview-portlet/task-tabexpview-portlet.vue';

 
@Component({
    components: {
        view_dashboard_UserInfoCard, 
        view_dashboard_TaskNav, 
         
    }
})
export default class Mytask extends MytaskBase {

}
</script> 